<template>
<div class="box">
	<div class="img-cnt">
		<img src="../assets/yinxiang.jpg">
		<p class="photo-num">{{msg}}</p>
	</div>
	<div class="bottom">
		<div class="txt-cnt">
			<p class="txt">{{msg1}}</p>
			</div>
			<div class="note-bottom">
				<span><i class="icon-location"></i>{{msg2}}</span>
				<span>{{msg3}}</span>
			</div>
	</div>
</div>
</template>

<script>
	export default {
	  name: 'Impression',
	 data(){
		return{
			msg:"2P",
			msg1:"到武汉的当日就去了精粉世家，店家招牌麻辣牛肉拌面用料充实，很辣很好吃。面窝和绿豆汤都很香，是我接下来几天一吃再吃的东西。",
			msg2:"精粉世家",
			msg3:"Annabel_Liu"
		}
	 }
	}
</script>

<style scoped="scoped">
	.box{
		display: inline-block;
		margin-right: 5px;
		width: 278px;
		background-color: #ffffff;
		border: 4px solid #ffffff;
	}
	.img-cnt img{
		width: 270px;
		height: 360px;
	}
	.img-cnt{
		position: relative;
	}
	.img-cnt .photo-num{
		position: absolute;
		bottom: 10px;
		right: 10px;
		color: #FFFFFF;
	}
	.box .bottom{
		padding: 16px;
	}
	.box p{
		font-size: 14px;
		overflow:hidden;
		text-overflow:ellipsis; 
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		 overflow: hidden;
	}
	.box .note-bottom{
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		color: #D6CCD6;
	}
</style>
